// 导入函数模块
import helloWorld from "./hello-world";
import imgSrc from './assets/img-1.png';
import svgSrc from './logo.svg';
import exampleText from './assets/example.txt';
import cartSrc from './assets/cart.png'
import Data from './assets/data.xml'
import Notes from './assets/data.csv'
import toml from './assets/json/data.toml';
import json from './assets/json/data.json5';

import './style.css'
import './style.less'
import './style.scss'
import './style.stylus'

import _ from 'lodash'
import './async-module.js'

helloWorld()

// imgSrc
const img = document.createElement('img')
img.style.width = '100%'
img.src = imgSrc
document.body.appendChild(img)

// svgSrc
const svgImg = document.createElement('img')
svgImg.style.width = '150px'
svgImg.src = svgSrc
document.body.appendChild(svgImg)

// exampleText
const block = document.createElement('div')
// block.style.cssText = `width: 200px; height: 200px; background: aliceblue`
// block.textContent = exampleText
block.style.width = '200px'
block.style.height = '200px'
block.style.background = 'aliceblue'
block.innerText = exampleText
document.body.appendChild(block)

// cartSrc
const testImg = document.createElement('img')
testImg.style.width = '100px'
testImg.src = cartSrc
document.body.appendChild(testImg)

// css
document.body.classList.add('hello')    // css
document.body.classList.add('world')    // less
document.body.classList.add('test')     // scss
document.body.classList.add('weight')   // stylus

// images图像
const block1 = document.createElement('div')
block1.style.cssText = `width: 200px; height: 200px; background-color: #2b3a42`
block1.classList.add('block-bg')
document.body.appendChild(block1)

// iconfont字体
const span = document.createElement('span')
span.classList.add('icon')
span.innerHTML = '&#xe607;'
document.body.appendChild(span)

// Data Notes
console.log(Data)
console.log(Notes)

// 自定义 JSON 模块 parser
console.log(toml.title); // output `TOML Example`
console.log(toml.owner.name); // output `Tom Preston-Werner`

console.log(json.title); // output `JSON5 Example`
console.log(json.owner.name); // output `Tom Preston-Werner`

// lodash
console.log(_.join(['index', 'module', 'loaded!'], ' '))

// 懒加载
// const button = document.createElement('button')
// button.textContent = '点击执行加法运算'
// button.addEventListener('click', () => {
//     import(/* webpackChunkName: 'math' */ './math.js').then(({ add }) => {
//         console.log(add(4, 5))
//     })
// })
// document.body.appendChild(button)

// prefetch预获取 preload预加载
const button = document.createElement('button')
button.textContent = '点击执行加法运算'
button.addEventListener('click', () => {
    import(/* webpackChunkName: 'math', webpackPrefetch: true */ './math.js').then(({ add }) => {
        console.log(add(4, 5))
    })
})
document.body.appendChild(button)
const buttons = document.createElement('button')
buttons.textContent = '点击执行字符串打印'
buttons.addEventListener('click', () => {
    // import(/* webpackChunkName: 'print', webpackPreload: true */ './print.js').then(({ print }) => {
    //     print(4, 5)
    // })
    import(/* webpackChunkName: 'print', webpackPrefetch: true */ './print.js').then(({ print }) => {
        print(4, 5)
    })
})
document.body.appendChild(buttons)